<template>
  <div class="box" style="margin-top: 10px">
    <div class="item">
      <div class="cellPadding txtCenter" style="width: 206px">
        Situation 现状
      </div>
      <div class="flex cellPadding leftLine">
        手术名称：
        <el-input
          v-model="form.situation.operateName"
          class="bottomLine"
          style="width: 320px"
        ></el-input>
      </div>
    </div>
    <div class="item">
      <div class="cellPadding txtCenter" style="width: 206px">
        Background 背景
      </div>
      <div class="cellPadding txtCenter leftLine" style="width: 428px">
        Assessmen 评估
      </div>
      <div class="cellPadding txtCenter leftLine">Recommendation 建议</div>
    </div>
    <div class="item">
      <div class="cellPadding" style="width: 206px; flex-shrink: 0">
        <div style="padding: 0 6px 6px">
          手术物品（病历、影像学资料
          <br />（
          <el-input
            v-model="form.background.ziliaoNum"
            class="bottomLine"
          ></el-input>
          张）等）：
        </div>
        <el-radio-group v-model="form.background.wupin">
          <el-radio label="确认"></el-radio>
          <el-radio label="其他"
            >其他：<el-input
              v-model="form.background.wupinContent"
              class="bottomLine"
              style="width: 100px"
            ></el-input
          ></el-radio>
        </el-radio-group>
      </div>
      <div class="leftLine" style="width: 428px; flex-shrink: 0">
        <div class="cellPadding bottomLine">
          <div class="flex">
            身份确认：
            <el-checkbox-group v-model="form.assessmen.shenfen">
              <el-checkbox label="1"
                ><span style="opacity: 0">1</span></el-checkbox
              >
            </el-checkbox-group>
          </div>
          <div class="flex">
            <div style="flex-shrink: 0">意识：</div>
            <el-radio-group v-model="form.assessmen.yishi">
              <el-radio label="清醒"></el-radio>
              <el-radio label="嗜睡"></el-radio>
              <el-radio label="模糊"></el-radio>
              <el-radio label="昏睡"></el-radio>
              <el-radio label="昏迷"></el-radio>
            </el-radio-group>
          </div>
        </div>
        <div class="cellPadding bottomLine">
          <div>
            生命体征：T:
            <el-input
              v-model="form.assessmen.vitalSigns.t"
              style="width: 30px"
            ></el-input>
            ℃
            <span class="space2"></span>
            R:
            <el-input
              v-model="form.assessmen.vitalSigns.r"
              style="width: 30px"
            ></el-input>
            次/分
            <span class="space2"></span>
            BP:
            <el-input
              v-model="form.assessmen.vitalSigns.bp1"
              style="width: 26px"
            ></el-input>
            /
            <el-input
              v-model="form.assessmen.vitalSigns.bp2"
              style="width: 26px"
            ></el-input>
            mmHg
          </div>
          <div style="padding-left: 5em">
            P:
            <el-input
              v-model="form.assessmen.vitalSigns.p"
              style="width: 26px"
            ></el-input>
            次/分
            <span class="space2"></span>
            疼痛：
            <el-input v-model="form.assessmen.vitalSigns.pain"></el-input>
            分
          </div>
        </div>
        <div class="cellPadding bottomLine">
          <div class="flex">
            药品：
            <el-radio-group v-model="form.assessmen.yaopin">
              <el-radio label="无"></el-radio>
              <el-radio label="有"
                >有<el-input
                  v-model="form.assessmen.yaopinContent"
                  class="bottomLine"
                  style="width: 60px"
                ></el-input
              ></el-radio>
            </el-radio-group>
            <span style="padding-left: 10px"></span>
            血制品：
            <el-radio-group v-model="form.assessmen.xuezhipin">
              <el-radio label="无"></el-radio>
              <el-radio label="有"
                >有<el-input
                  v-model="form.assessmen.xuezhipinContent"
                  class="bottomLine"
                  style="width: 50px"
                ></el-input
              ></el-radio>
            </el-radio-group>
            <el-checkbox-group v-model="form.assessmen.guancha">
              <el-checkbox label="观察"></el-checkbox>
            </el-checkbox-group>
          </div>
        </div>
        <div class="cellPadding bottomLine">
          <div class="flex">
            皮肤情况：
            <el-radio-group v-model="form.assessmen.skin">
              <el-radio label="完整"></el-radio>
              <el-radio label="压力性损伤"
                >压力性损伤：<el-input
                  v-model="form.assessmen.skinYalixing"
                  class="bottomLine"
                  style="width: 60px"
                ></el-input
              ></el-radio>
              <el-radio label="其他"
                >其他：<el-input
                  v-model="form.assessmen.skinQita"
                  class="bottomLine"
                  style="width: 60px"
                ></el-input
              ></el-radio>
            </el-radio-group>
          </div>
        </div>
        <div class="cellPadding">
          <div>管道：</div>
          <div>
            <el-radio-group v-model="form.assessmen.pipe">
              <el-radio label="无"></el-radio>
              <el-radio label="外周静脉"></el-radio>
              <el-radio label="CVC"></el-radio>
              <el-radio label="PICC"></el-radio>
              <el-radio label="胃管"></el-radio>
              <el-radio label="导尿管"></el-radio>
              <el-radio label="气管插管"></el-radio>
              <el-radio label="引流管"
                >引流管<el-input
                  v-model="form.assessmen.pipeYinliuNum"
                  class="bottomLine"
                  style="width: 50px"
                ></el-input
                >根</el-radio
              >
              <el-radio label="其他"
                >其他导管：<el-input
                  v-model="form.assessmen.pipeQitaNum"
                  class="bottomLine"
                  style="width: 30px"
                ></el-input
                >根：<el-input
                  v-model="form.assessmen.pipeQita"
                  class="bottomLine"
                  style="width: 80px"
                ></el-input
              ></el-radio>
            </el-radio-group>
          </div>
        </div>
      </div>
      <div class="leftLine">
        <div class="cellPadding">
          <el-radio-group v-model="form.recommendation.jianyi">
            <el-radio label="无"></el-radio>
            <el-radio label="预防跌倒/坠床"></el-radio>
            <el-radio label="关注穿刺部位"></el-radio>
            <el-radio label="关注受压部位"></el-radio>
          </el-radio-group>
        </div>
      </div>
    </div>
    <div class="item">
      <div class="w-392 cellPadding">
        <div class="flex">
          转出科室：
          <el-input v-model="form.zcDept" style="width: 100px"></el-input>
          签名：
          <el-input v-model="form.zcSign"></el-input>
        </div>
        <div class="flex">
          时间：
          <el-input v-model="form.zcTime.year" class="center"></el-input>
          年
          <el-input v-model="form.zcTime.month" class="center"></el-input>
          月
          <el-input v-model="form.zcTime.day" class="center"></el-input>
          日
          <el-input v-model="form.zcTime.hour" class="center"></el-input>
          时
          <el-input v-model="form.zcTime.minute" class="center"></el-input>
          分
        </div>
      </div>
      <div class="leftLine cellPadding">
        <div class="flex">
          转入科室：
          <el-input v-model="form.zrDept" style="width: 100px"></el-input>
          签名：
          <el-input v-model="form.zrSign"></el-input>
        </div>
        <div class="flex">
          时间：
          <el-input v-model="form.zrTime.year" class="center"></el-input>
          年
          <el-input v-model="form.zrTime.month" class="center"></el-input>
          月
          <el-input v-model="form.zrTime.day" class="center"></el-input>
          日
          <el-input v-model="form.zrTime.hour" class="center"></el-input>
          时
          <el-input v-model="form.zrTime.minute" class="center"></el-input>
          分
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import { cloneDeep } from 'lodash-unified'
import { defineComponent, reactive, toRefs, watch } from 'vue'

export default defineComponent({
  props: {
    form: {
      type: Object,
      default: () => ({})
    }
  },
  setup(props) {
    const state = reactive({
      form: {}
    })

    function getParams() {
      return state.form
    }

    watch(
      () => props.form,
      val => {
        if (val) {
          state.form = cloneDeep(val)
        }
      },
      {
        immediate: true,
        deep: true
      }
    )

    return {
      ...toRefs(state),
      getParams
    }
  }
})
</script>

<style lang="scss" scoped>
@import '@/views/doc/styles/doc-common.scss';
@import '@/views/doc/styles/doc-fix.scss';
$border: 1px solid #000;

.box {
  border: 1px solid #000;

  .item {
    border-top: 1px solid #000;
    display: flex;

    &:first-child {
      border-top: none;
    }

    .label {
      border-right: 1px solid #000;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
    }

    .content {
      padding: 6px 20px;

      .row {
        display: flex;
        margin-top: 10px;
        white-space: nowrap;

        &:first-child {
          margin-top: 0;
        }
      }
    }

    .flex {
      display: flex;
    }
  }
}

.bottomLine {
  border-bottom: 1px solid #000;
}

.leftLine {
  border-left: 1px solid #000;
}

.checkItem {
  padding: 6px 10px;
}

.txtCenter {
  text-align: center;
}

.cellPadding {
  padding: 4px 6px;
}

.space {
  display: inline-block;
  width: 30px;
}

.space2 {
  display: inline-block;
  width: 16px;
}

.w-392 {
  width: 392px;
}

.w-244 {
  width: 244px;
}

::v-deep {
  .el-radio-group,
  .el-checkbox-group {
    display: flex;
    align-items: center;
    flex-wrap: wrap;

    .el-radio {
      display: flex;
      align-items: center;
    }
  }

  .el-input {
    width: 50px;
  }

  .el-input .el-input__inner {
    height: 20px;
    text-align: left;
  }

  .el-input.center .el-input__inner {
    text-align: center;
  }

  .el-input.is-disabled .el-input__inner {
    background-color: #fff;
  }

  input:disabled {
    color: #000;
    background: #fff;
  }
}
</style>
